<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="../CSS/zhuye1.css">
    <link rel="stylesheet" href="../CSS/lbt.css">
    <link rel="stylesheet" href="../CSS/zhuye2.css">
</head>

<body>
    <!-- 主页开始 -->
    <div class="zhuye">
        <!-- 头部开始 -->
        <div class="head">
            <!-- 头像 -->
            <div class="head-tx"><a href=""></a></div>
            <!-- 名字 -->
            <div class="head-mz"><a href="">第九组</a></div>
            <!-- 搜索框 -->
            <div class="head-ssk">
                <div class="shell">
                    <input type="text" placeholder="请输入……">
                    <a href="">
                        <img src="../IMG/sousuo.png" alt="">
                    </a>
                </div>
            </div>
            <!-- 导航 -->
            <div class="dhlssk2">
                <div class="head-dhl">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">课程</a></li>
                        <li><a href="#">论坛</a></li>
                        <li><a href="#">书籍</a></li>
                        <li><a href="#">我的</a></li>
                    </ul>
                </div>
                <!-- ssk2 -->
                <div class="head-ssk2">
                    <div class="shell2">
                        <input type="text" placeholder="请输入……">
                        <a href="">
                            <img src="../IMG/sousuo.png" alt="">
                        </a>
                    </div>
                </div>

            </div>
            <!-- 头部结束 -->
        </div>
        <!-- 头部结束 -->
        <!-- 中间开始 -->
        <div class="zj">
            <!-- 轮播图 -->
            <div class="lbpicture">
                <div id="banner">
                    <ul id="imglist">
                        <li><img src="../IMG/q1.webp" alt=""></li>
                        <li><img src="../IMG/q1.webp" alt=""></li>
                        <li><img src="../IMG/q1.webp" alt=""></li>
                        <li><img src="../IMG/q1.webp" alt=""></li>
                    </ul>
                    <ul id="icolist">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                    <div class="prev">《</div>
                    <div class="next">》</div>
                </div>
            </div>
            <!-- 轮播图右部 -->
            <div class="lbtyb">
                <ul>
                    <li><a href="https://www.runoob.com/" target="_blank">菜鸟教程</a></li>
                    <li><a href="https://www.runoob.com/html/html-tutorial.html" target="_blank">HTML</a></li>
                    <li><a href="https://www.runoob.com/css/css-tutorial.html" target="_blank">CSS</a></li>
                    <li><a href="https://www.runoob.com/js/js-tutorial.html" target="_blank">JavaScript</a></li>
                    <li><a href="https://www.runoob.com/python/python-basic-syntax.html" target="_blank">Python</a></li>
                    <li><a href="https://www.runoob.com/java/java-tutorial.html" target="_blank">JAVA</a></li>
                </ul>
            </div>
        </div>
        <!-- 视频部分 -->
        <div class="kc-an">
            <h2 class="kcan">课程</h2>
        </div>
        <div class="container">
            <div class="card">
                <div class="imgBx">
                    <a href="https://www.bilibili.com/video/BV14J4114768/?spm_id_from=333.337.search-card.all.click"
                        target="_blank">
                        <img src="../IMG/11.jpg" alt="">
                    </a>
                </div>
                <div class="content">
                    <a href="https://space.bilibili.com/415434293" target="_blank">
                        <h2>up主:黑马pink讲前端</h2>
                    </a>
                    <p>黑马程序员pink老师前端入门教程，
                        零基础必看的h5(html5)+css3+移动端前端视频教程。
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="imgBx">
                    <a href="https://www.bilibili.com/video/BV1XJ411X7Ud/?spm_id_from=333.337.search-card.all.click"
                        target="_blank">
                        <img src="../IMG/12.jpg" alt="">
                    </a>
                </div>
                <div class="content">
                    <a href="https://space.bilibili.com/302417610" target="_blank">

                        <h2>up主:尚硅谷</h2>
                    </a>
                    <p>尚硅谷Web前端零基础入门，
                        HTML5+CSS3基础教程初学者从入门到精通。
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="imgBx">
                    <a href="https://www.bilibili.com/video/BV1ux411d75J/?spm_id_from=333.337.search-card.all.click"
                        target="_blank">
                        <img src="../IMG/13.jpg" alt="">
                    </a>
                </div>
                <div class="content">
                    <a href="https://space.bilibili.com/37974444" target="_blank">
                        <h2>up主:黑马程序员</h2>
                    </a>
                    <p>黑马程序员JavaScript全套教程，
                        Web前端必学的JS入门教程，零基础JavaScript入门。
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="imgBx">
                    <a href="https://www.bilibili.com/video/BV1et411b73Z?vd_source=b9b52b95c9572c9eee2280f748289bd1"
                        target="_blank">
                        <img src="../IMG/14.jpg" alt="">
                    </a>
                </div>
                <div class="content">
                    <a href="https://space.bilibili.com/37974444" target="_blank">
                        <h2>up主:黑马程序员</h2>
                    </a>
                    <p>黑马程序员匠心之作IC++教程从0到1入门编程,
                        学习编程不再难。
                    </p>
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <a href="https://www.bilibili.com/video/BV1wD4y1o7AS?vd_source=b9b52b95c9572c9eee2280f748289bd1"
                        target="_blank">
                        <img src="../IMG/15.jpg" alt="">
                    </a>
                </div>
                <div class="content">
                    <a href="https://space.bilibili.com/612593877" target="_blank">
                        <h2>up主:Python_子木</h2>
                    </a>
                    <p>花了2万多买的Python教程全套，现在分享给大家，
                        入门到精通(Python全栈开发教程)
                    </p>
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <a href="https://www.bilibili.com/video/BV17F411T7Ao?vd_source=b9b52b95c9572c9eee2280f748289bd1"
                        target="_blank"><img src="../IMG/16.jpg" alt=""></a>
                </div>
                <div class="content">
                    <a href="https://space.bilibili.com/37974444" target="_blank">
                        <h2>up主:黑马程序员</h2>
                    </a>
                    <p>黑马程序员Java零基础视频教程_上部(Java入门，
                        含斯坦福大学练习题+力扣算法题和大厂java面试题)
                    </p>
                </div>
            </div>
        </div>
        <!-- 书籍部分 -->
        <div class="kc-an">
            <h2 class="kcan">书籍</h2>
        </div>
        <div class="sjbf">
            <div class="shu">
                <a href="./shu1.html">
                    <img src="../IMG/s1.webp" alt="">
                </a>
                <div class="shu-1">
                    <a href="http://product.dangdang.com/11227915130.html">
                        <h3>Head First HTML与CSS</h3>
                    </a>
                    <p>《Head First HTML与CSS》是2013年中国电力出版社出版的图书， 作者是罗布森、弗里曼。</p>
                </div>
            </div>
            <div class="shu">
                <a href="./shu2.html">
                    <img src="../IMG/s2.jpg" alt="">
                </a>
                <div class="shu-1">
                    <a href="http://product.dangdang.com/11442850145.html">
                        <h3>CSS揭秘</h3>
                    </a>
                    <p>《CSS揭秘》是2016年人民邮电出版社出版的图书，作者是韦鲁。</p>
                </div>
            </div>
            <div class="shu">
                <a href="./shu3.html">
                    <img src="../IMG/s3.webp" alt="">
                </a>
                <div class="shu-1">
                    <a href="http://product.dangdang.com/11740494950.html">
                        <h3>CSS实战手册</h3>
                    </a>
                    <p>《CSS实战手册（第2版）》是2010年电子工业出版社出版的图书，作者是美国的David Sawyer McFarland。</p>
                </div>

            </div>
        </div>
        <!-- 中间结束 -->
        <!-- 关于我们 -->
        <div class="kc-an2">
            <h2 class="kcan2">关于我们</h2>
        </div>
        <div class="gywm">
            <div class="gywmz">
                <div class="xz">
                    <ul>
                        <li><a href="https://gitee.com/html-team/study-team.git" target="_blank"><img
                                    src="../IMG/shouye.png" alt=""></a></li>
                        <li><a href=""><img src="../IMG/kecheng.png" alt=""></a></li>
                        <li><a href=""><img src="../IMG/14.png" alt=""></a></li>
                        <li><a href=""><img src="../IMG/shuji.png" alt=""></a></li>
                        <li><a href=""><img src="../IMG/wode.png" alt=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="gywmy">
                <div class="si">
                    <img src="../IMG/c1.jpg" alt="">
                    <h3>黄子纤</h3>
                    <p>负责：</p>
                </div>
                <div class="si">
                    <img src="../IMG/c2.jpg" alt="">
                    <h3>刘倚淳</h3>
                    <p>负责：</p>
                </div>
                <div class="si">
                    <img src="../IMG/c5.jpg" alt="">
                    <h3>黄祥</h3>
                    <p>负责：</p>
                </div>
                <div class="si">
                    <img src="../IMG/c4.jpg" alt="">
                    <h3>何伟锐</h3>
                    <p>负责：</p>
                </div>
                <div class="si">
                    <img src="../IMG/c3.jpg" alt="">
                    <h3>张敏</h3>
                    <p>负责：</p>
                </div>
                <div class="si">
                    <img src="../IMG/c6.jpg" alt="">
                    <h3>杨国辉</h3>
                    <p>负责：</p>
                </div>
            </div>

        </div>
        <!-- 关于我们2 -->
        <div class="gywm2">
            <div class="si">
                <img src="../IMG/c1.jpg" alt="">
                <h3>黄子纤</h3>
                <p>负责：</p>
            </div>
            <div class="si">
                <img src="../IMG/c2.jpg" alt="">
                <h3>刘倚淳</h3>
                <p>负责：</p>
            </div>
            <div class="si">
                <img src="../IMG/c5.jpg" alt="">
                <h3>黄祥</h3>
                <p>负责：</p>
            </div>
            <div class="si">
                <img src="../IMG/c4.jpg" alt="">
                <h3>何伟锐</h3>
                <p>负责：</p>
            </div>
            <div class="si">
                <img src="../IMG/c3.jpg" alt="">
                <h3>张敏</h3>
                <p>负责：</p>
            </div>
            <div class="si">
                <img src="../IMG/c6.jpg" alt="">
                <h3>杨国辉</h3>
                <p>负责：</p>
            </div>
        </div>

    </div>
    <script src="../js/zhuye.js"></script>
</body>

</html>